<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8"%>
<%@ include file="../include/head.jsp"%>
<%@ include file="../include/top.jsp"%>
<%@ include file="../include/left.jsp"%>
<div class="main-content">

	<%@ include file="../include/navigate.jsp"%>

	<div class="container">
		<div class="widget-box">
			<div class="widget-box-header">
				<div class="col-sm-2">
					<div class="title">
						<i class="icon-edit">&nbsp;</i>编辑XML作业模板
					</div>
				</div>
			</div>
			
			<div class="widget-box-content" style="padding: 15px;">
				<c:if test="${not empty message}">
					<div class="alert alert-danger" role="alert">${message}</div>
				</c:if>
				
				<div id="saveStatus"></div>
				
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label class="col-sm-2 control-label">模板名称:</label>

						<div class="col-sm-9">
							<input type="hidden" name="xmlJobId" value="${xmlJob.xmlJobId}">
							<input type="text" class="form-control" name="templateName" placeholder="模板名称" data-toggle="tooltip" data-placement="left" required="" value="${xmlJob.xmlJobName}">
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">参数列表:</label>
						
						<div class="col-sm-5">
							<table id="jqGrid"></table>
	    					<div id="jqGridPager"></div>
    					</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">脚本模板:</label>
						
						<div class="col-sm-5">
							<pre id="editor" style="width:803px; height:300px"></pre>
						</div>
					</div>
					
					<div class="form-group">
	                    <label class="col-sm-2 control-label">备注:</label>
	
	                    <div class="col-sm-5">
							<textarea id="des" style="width:803px;" class="autosize-transition form-control" style="overflow: hidden; word-wrap: break-word; resize: vertical;">${xmlJob.note}</textarea>
	                    </div>
	                </div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label"></label>

						<div class="col-sm-2">
							<button type="button" class="btn btn-success" onclick="submitUserData()">提交</button>
							<a type="button" class="btn btn-primary" href="${pageContext.request.contextPath}/EtlXml/list"> 返回列表
							</a>
						</div>
					</div>
				</form>
			</div>
		</div>

		<div style="position: fixed; bottom: 0px; width: 100%;" align="center">
			<%@ include file="../include/footer.jsp"%>
		</div>
	</div>

	<script type="text/javascript">
	    var editor = ace.edit("editor");
	    editor.session.setMode("ace/mode/xml");
	    
	    editor.setValue(decodeURI(unescape("${xmlJob.script}")));
		
		$(document).ready(function() {
			
			window.submitUserData = function(){
				var templateId = $("input[name='xmlJobId']").val();
				var templateName = $("input[name='templateName']").val();
				var rowData = $("#jqGrid").jqGrid("getRowData");
				var scriptContent = editor.getValue();
				
				$.ajax({
					type:'post',
		            url: '/template_para/updateTemplate',
		            data: { templateId: templateId, templateName: templateName, xmlScript: scriptContent, params: JSON.stringify(rowData), note: $("#des").val()},  
		            cache:false,    
		            dataType:'json',
		            success: function(data) {  
		            	if(data == 'success'){
							operationSuccess();
							window.location = "/EtlXml/list";
						} else {
							operationFailedWithMessage(data);
						}
		            },    
		            error : function() {
		            	operationFailed();
		            }
				});
			}
			
		    $("#jqGrid").jqGrid({
		    	url:'/template_para/data?tempId=${xmlJob.xmlJobId}',
		    	editurl: '/template_para/doNothing',
		    	datatype: "json",
		        colModel: [
		            {
		                name: 'paramId',
		                editable: true,
		                hidden : true
		            },
		            {
		                name: 'isThreadUse',
		                editable: true,
		                hidden : true
		            },
		            {
		                label: '组别',
		                name: 'paramGroupId',
		                editable: true,
		                sortable: false,
		                edittype: "select",
		                editoptions: {
		                    value: "1:1;2:2;3:3;4:4;5:5;6:6"
		                }
		            },
		            {
		                label: '组名称',
		                name: 'paramGroupName',
		                sortable: false,
		                editable: true,
		                editrules:{
		                    required: true
		                },
		            },
		            {
		                label : '参数名',
		                name: 'paramName',
		                sortable: false,
		                editable: true,
		                editrules:{
		                    required: true
		                },
		            },
		            
		            {
		                label : '显示名',
		                name: 'paramDisplayName',
		                sortable: false,
		                editable: true,
		                editrules:{
		                    required: true
		                },
		            },
		            {
		                label: '参数类型',
		                name: 'paramType',
		                sortable: false,
		                editable: true,
		                edittype: "select",
		                editoptions: {
		                    value: "connection:连接;date:日期;time:时间;int:数值;text:文本;sql:SQL"
		                }
		            },
		            {
		                label: '默认值',
		                name: 'defaultValue',
		                sortable: false,
		                editable: true
		            },
		            {
		                label: '参数说明',
		                name: 'paramDes',
		                sortable: false,
		                editable: true
		            },
		            {
		                label: '显示顺序',
		                name: 'displayOrder',
		                sortable: false,
		                editable: true,
		                editrules:{
		                	custom_func: validatePositive,
		                    custom: true,
		                    required: true
		                },
		            }
		        ],
		        onSelectRow: function(rowId){
		        	// rowId置0，保证有值
		        	$("#" + rowId + "_paramId").val("0");
		        	$("#" + rowId + "_isThreadUse").val("no");
		        },
		        width: 800,
		        height: 200,
		        rowNum: 150,
		        rownumbers:true,
		        scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records
		        pager: "#jqGridPager"
		    });
		    
		    function validatePositive(value, column) {
		    	var num = /^\d+$/;
		        if (!num.test(value))
		            return [false, "请填入正确的顺序值！"];
		        else
		            return [true, ""];
		    }  
		    
		    function deleteRowFunc() {
				var selectedId = $("#jqGrid").jqGrid("getGridParam","selrow"); 
		    	if(selectedId) {　　　　　 
					$("#jqGrid").jqGrid("delRowData", selectedId);　　　
				} 
		    }
		
		    $('#jqGrid').navGrid("#jqGridPager", {edit: false, add: false, del: true, refresh: false, view: false, search: false, delfunc : deleteRowFunc});
		    $('#jqGrid').inlineNav('#jqGridPager',
		        { 
		            edit: true, 
		            add: true, 
		            del: true, 
		            cancel: true,
		            editParams: {
		                keys: true,
		            },
		            addParams: {
		                keys: true
		            }
		        }); 
		});
	</script>

	<%@ include file="../include/bottom.jsp"%>